<template>
	<view>
		<view class="list" @click="handleHouse">
			<text class="title required">房源名称</text>
			<input type="text" placeholder="请选择" v-model="formData.name" disabled />
			<image src="https://hosue-omo.oss-cn-shenzhen.aliyuncs.com/assets/rightIcon.png" mode="" class="more_icon">
			</image>
		</view>
		<view class="line" />
		<view class="list">
			<text class="title required">预约签订时间</text>
			<!-- :end="endDate" type="datetime" format="YYYY-MM-DD HH:mm"-->
			<uni-datetime-picker v-model="formData.bookingTime"  :disabled="showPage" :start="currentDate" > 
				<input type="text" placeholder="请选择" v-model="formData.bookingTime" disabled />
				<image src="https://hosue-omo.oss-cn-shenzhen.aliyuncs.com/assets/rightIcon.png" mode=""
					class="more_icon" v-if="!showPage">
				</image>
			</uni-datetime-picker>
		</view>
		<view class="bottom_box" v-if="!showPage">
			<view class="add_btn" @click="handleSubmit">
				提交预约
			</view>
		</view>
	</view>
</template>

<script setup>
import { reactive, ref } from 'vue';
import {onLoad} from '@dcloudio/uni-app'
import http from '@/uitls/http.js';
import {contractRenewal}  from './js/api.js'
const showPage = ref(false)
const formData =reactive({
	houseId:'',
	name:'',
	bookingTime:'',
	id:'',
})

const currentDate = new Date().toISOString().split('T')[0]

// const endDate = new Date(Date.now() + 365 * 24 * 60 * 60 * 1000).toISOString().split('T')[0] // 1年后

const handleSubmit =async ()=>{
	if(!formData.bookingTime) return http.isMssage('请选择维修时间')
	let params = {
		id:formData.id,
		bookingTime:formData.bookingTime
	}
	let res = await contractRenewal(params)
	if(res.data.code==0){
		http.isMssage('提交成功')
		uni.navigateBack()
	}
}
const handleHouse = ()=>{
	uni.navigateTo({
		url:"/pagesA/details/details?id="+formData.houseId
	})
}
onLoad((options)=>{
	if(options.id){
		formData.id = options.id
		formData.houseId = options.houseId
		formData.name = options.houseName
	}
})
</script>
<style>
	page {
		background: #F6F6F6 !important;
	}
</style>
<style lang="less" scoped>
.list {
		display: flex;
		align-items: center;
		// justify-content: space-between;
		padding: 30rpx;
		background: #FFFFFF;
		position: relative;

		.title {
			font-family: PingFangSC-Regular;
			font-size: 28rpx;
			color: #333333;
			font-weight: 400;
			width: 180rpx;
			text-align: left;
		}

		input {
			font-size: 28rpx;
		}

		.jiage {
			min-width: 50rpx;
			height: 100%;
			// border: 1px solid red;
			position: absolute;
			// right: 30rpx;
			right: 16rpx;
			font-family: PingFangSC-Regular;
			font-size: 28rpx;
			color: #333333;
			text-align: right;
			font-weight: 400;
			padding: 0 10rpx;
		}

		.more_icon {
			position: absolute;
			right: 30rpx;
			top: 34rpx;
			width: 18rpx;
			height: 36rpx;
		}

		.biaoti {
			font-family: PingFangSC-Semibold;
			font-size: 32rpx;
			color: #000000;
			line-height: 36rpx;
			font-weight: 600;
			margin-right: 16rpx;
		}

		.state_text {
			font-family: PingFangSC-Regular;
			font-size: 28rpx;
			color: #CCCCCC;
			font-weight: 400;
			margin-left: 32rpx;
		}

		.textarea {
			width: 658rpx;
			height: 200rpx;
			// margin: auto;
			background: #F8F8F8;
			border: 1rpx solid rgba(238, 238, 238, 1);
			border-radius: 8rpx;
			padding: 16rpx;
			font-size: 28rpx;
		}

		.upload_box {
			width: 100%;
			// border: 1rpx solid rgba(238, 238, 238, 1);
			border-radius: 8rpx;
			// height: 200rpx;
			// display: flex;
			// flex-direction: column;
			// justify-content: center;
			// align-items: center;
			display: grid;
			grid-template-columns: 1fr 1fr 1fr 1fr;
			gap: 16rpx;

			.photo {
				height: 156rpx;
				width: 156rpx;
				// margin-right: 22.56rpx;
				border: 1rpx solid rgba(238, 238, 238, 1);
				border-radius: 8rpx;
			}

			.upload {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				border: 1rpx solid rgba(238, 238, 238, 1);
				border-radius: 8rpx;
				height: 156rpx;
				width: 156rpx;

				.upload_icon {
					width: 60rpx;
					height: 60rpx;
				}

				.upload_text {
					margin-top: 16rpx;
					font-family: PingFangSC-Regular;
					font-size: 28rpx;
					color: #999999;
					text-align: center;
					font-weight: 400;
				}
			}

		}
	}
	.line {
		background: #eeeeee;
		height: 1rpx;
		margin: 0 30rpx;
	}
	.bottom_box {
		position: fixed;
		bottom: 0;
		left: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 30rpx 0 60rpx 0;
		background: #FFFFFF;
		width: 100%;
	
		.add_btn {
			width: 626rpx;
			height: 90rpx;
			line-height: 90rpx;
			background-image: linear-gradient(270deg, #F1B13F 0%, #F8D648 100%);
			border-radius: 50rpx;
			font-family: PingFangSC-Regular;
			font-size: 32rpx;
			color: #FFFFFF;
			text-align: center;
			font-weight: 400;
		}
	}
</style>
